<div class="Fimg">
    <div class="head">
        <div class="btn_head">
            <div class="fanhui" (click)="lppServ.returnToPreviousPage()"><span class="iconfont icon-fanhui"></span>&ensp;返回</div>
        </div>
        <div class="logo_tital">LOGO | 图生图</div>
        <div class="user_img"><span class="iconfont icon-touxiang user_touxiang"></span></div>
    </div>
    <div class="cont">
        <div class="demand">
            <div class="Section_1">
                <div class="box_1">
                    <p>上传原图</p>
                    <div class="box_imginput" [ngClass]="{'showme' :this.img_src.length != 0}">
                        <!-- <input  type="file" id="input_img" id="chooseImage"> -->
                        <div  class="input_btn" (click)="inputimg()">拖拽或点击</div>
                        
                        <div  class="input_P" (click)="inputimg()">支持 JPG/PNG 10MB 以内</div>
                    </div>
                    <div class="img_input" [ngClass]="{'showme' :this.img_src.length == 0}">
                        <div class="span_box" (click)="showbutton()"><span class="iconfont icon-shanchu shanchu_img"></span></div>
                        <img  alt="" class="imgAvatar" id="imgAvatar" >

                    </div>

                </div>
                <div class="box_1">
                    <p>创意描述</p>
                    <div class="text_ipt">
                        <textarea rows="15" cols="800"  placeholder="请输入你的创意"></textarea>
                        <div class="text_1">
                            <div class="text_2"><p>智能补全</p></div>
                            
                        </div>
                    </div>
                </div>
                <div class="box_1">
                    <p>不希望呈现的内容</p>
                    <div class="text_ipt_2">
                        <textarea rows="15" cols="800"  placeholder="请输入不希望呈现的内容"></textarea>
                        <div class="text_2">
                            <div class="text_2"></div>
                            
                        </div>
                    </div>
                </div>

            </div>

            <div class="cont_cont">
                
                <div class="Section_2">
                    <p>模型</p>
                    <div class="model" (click)="lppServ.clickDiv1=true">
                        <div class="model_img">
                            <img src="" alt="">
                        </div>
                        <div class="model_miaoshu">
                            <p class="P1">音画视觉</p>
                            <p class="P2">动画电影风格</p>
                        </div>

                    </div>
                </div>
                <div class="Section_2-5" id="002">
                    <div class="Section_2-5_tatle" id="Section_2-5_tatle" (click)="this.open_1()" >
                        <p>风格模型</p><span class="iconfont icon-fanhui Section_2-5_open"></span>
                    </div>
                    <div class="height_box" >
                        <div class="model" *ngFor="let item of this.lppServ.MyModel">
                            <div class="model_img">
                                <img src="{{item.modelsrc}}">
                            </div>
                            <div class="model_miaoshu">
                                <p class="P1">{{item.name}}</p>
                                <p class="P2">{{item.detail}}</p>
                            </div>
                        </div>
                        <div class="Section_2-5_btn" (click)="grow()">添加风格模型</div>
                    </div>
                </div>
                <div class="Section_3" id="001" >
                    <div class="Section_3_tatle"(click)="this.open()" >
                        <p>参数设定</p><span class="iconfont icon-fanhui Section_3_open"></span>
                    </div>
                    <div  style="margin: 35px 0px  0px  0px;">
                        <p>画面尺寸</p>
                        <div  class="Fi_chooseli">
                            <div  class="Fi_chooseli">
                                <select class="chooseli" id="chooseli1" onchange="line_width(this)">
                                    <!-- <option *ngFor="let option of options1" [value]="option.value">{{ option.label }}</option> -->
                                </select>
                                <select class="chooseli" id="chooseli2" onchange="line_width(this)">
                                    <option> {{this.lppServ.options2[this.lppServ.thIndex][0]}}</option>
                                    <!-- <option *ngFor="let option of options let i = index" [value]="option[i].value">{{ option[i].label }}</option> -->
                                </select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <p>画面缩放</p>
                        <div style="padding: 10px 10px 10px 5px;">
                            <select class="chooseli" id="chooseli3" [(ngModel)]="selectedOption" (ngModelChange)="onOptionChange($event)" >
                                <option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
                            </select>                            
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>重绘幅度</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="0"
                        [nzMax]="100"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value1"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="0" [nzMax]="100" [nzStep]="1" [(ngModel)]="img_value1" [nzMarks]="nzMarks" ></nz-slider>
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>人脸相似度</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="0"
                        [nzMax]="100"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value2"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="0" [nzMax]="100" [nzStep]="1"  [(ngModel)]="img_value2"  [nzMarks]="nzMarks" ></nz-slider>
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>创意相关性</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="1.0"
                        [nzMax]="10" 
                        [nzStep]="0.5"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value3"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="1.0" [nzMax]="10" [nzStep]="0.5"  [(ngModel)]="img_value3"  [nzMarks]="nzMarks" ></nz-slider>
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>生成张数</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="1"
                        [nzMax]="4"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value4"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="1" [nzMax]="4" [nzStep]="1"  [(ngModel)]="img_value4"  [nzMarks]="nzMarks" ></nz-slider>
                        </div>
                    </div>
                    <div>
                        <p>采样器</p>
                        <div style="padding: 10px 10px 10px 5px;">
                            <select class="chooseli" id="chooseli3" [(ngModel)]="selectedOption" (ngModelChange)="onOptionChange($event)" >
                                <option *ngFor="let option of  options_cyq" [value]="option.value">{{ option.label }}</option>
                            </select>                            
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>采样步骤</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="1"
                        [nzMax]="30"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value5"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="1" [nzMax]="30" [nzStep]="1"  [(ngModel)]="img_value5"  [nzMarks]="nzMarks" ></nz-slider>
                        </div>
                    </div>
                    <div>
                        <div class="seed_btn">
                            <p id="P1_seed">Seed</p>
                            <div class="dui" id="dui">
                                <span class="iconfont icon-dui " (click)=" clicksuiji()"></span>
                            </div>
                            <p id="P2_suiji">随机</p>
                        </div>
                        <div style="padding: 10px 10px 20px 5px;">
                            <input type="text">
                        </div>
                    </div>
                    <div class="panel_1" *ngIf="suiji" style=" position: relative;">
                        <p>生成批次</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="1"
                        [nzMax]="4"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value6"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="1" [nzMax]="4" [nzStep]="1"  [(ngModel)]="img_value6"  [nzMarks]="nzMarks" nzTooltipVisible="never"></nz-slider>
                            
                        </div>
                    </div>
                </div>
                <div class="Section_4" id="003" >
                    <div class="Section_3_tatle" (click)="open_2()">
                        <p>画面控制</p><span class="iconfont icon-fanhui Section_3_open"></span>
                    </div>
                    <div style=" margin-top: 20px;">
                        <div class="radio-input">
                            <label >
                                <input value="value-1" name="value-radio" id="value-1" type="radio" checked="">
                            <span class="text__">控制1</span>
                            </label>
                            <label >
                                <input value="value-2" name="value-radio" id="value-2" type="radio">
                            <span class="text__">控制2</span>
                            </label>
                            <label >
                                <input value="value-3" name="value-radio" id="value-3" type="radio">
                            <span class="text__">控制3</span>
                            </label>
                            <span class="selection"></span>
                        </div>

                    </div>
                    <div style="position: relative; height: 30px;">
                        <p style="position: absolute; left: 10px;">高清修复</p><nz-switch [(ngModel)]="switchValue1" style="position: absolute;right: 10px;"></nz-switch>
                    </div>
                    <div class="box_1">
                        <p>上传原图</p>
                        <div class="box_imginput" >
                            <input  type="file" id="input_img">
                            <div  class="input_btn" (click)="inputimg()">拖拽或点击</div>
                            <!-- <img src="" alt=""> -->
                            <div  class="input_P" (click)="inputimg()">支持 JPG/PNG 10MB 以内</div>
                        </div>
                    </div>
                    <div  style=" position: relative;">
                        <p>权重</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="0"
                        [nzMax]="2.0" 
                        [nzStep]="0.1"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value7"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="0.0" [nzMax]="2.0" [nzStep]="0.1"  [(ngModel)]="img_value7"  [nzMarks]="nzMarks2" ></nz-slider>
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>引导介入时机</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="0"
                        [nzMax]="1.00" 
                        [nzStep]="0.01"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value8"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="0.00" [nzMax]="1.00" [nzStep]="0.01"  [(ngModel)]="img_value8"  [nzMarks]="nzMarks3" ></nz-slider>
                        </div>
                    </div>
                    <div style=" position: relative;">
                        <p>引导结束时机</p>
                        <nz-input-number
                        class="numberinput"
                        [nzMin]="0"
                        [nzMax]="1.00" 
                        [nzStep]="0.01"
                        [ngStyle]="{ marginLeft: '10px' }"
                        [(ngModel)]="img_value9"
                        ></nz-input-number>
                        <div style="padding: 10px 10px 10px 5px;">
                            <nz-slider [nzMin]="0.00" [nzMax]="1.00" [nzStep]="0.01"  [(ngModel)]="img_value9"  [nzMarks]="nzMarks3" ></nz-slider>
                        </div>
                    </div>
                </div>    

            </div>
            <button class="up" (click)="getMyString()" >立即生成</button>
        </div>
        <div class="show">
            <div class="show_1">
                <div class="my_picture" *ngFor="let item of MyString" [ngClass]="{'my_picture1': MyString.length != 0}">
                    <p>重绘幅度:{{item.V1}}</p>
                    <p>人脸相似度:{{item.V2}}</p>
                    <p>创意相关性:{{item.V3}}</p>
                    <p>生成张数:{{item.V4}}</p>
                    <p>采样步骤:{{item.V5}}</p>
                    <p>生成批次:{{item.V6}}</p>
                    <p>权重:{{item.V7}}</p>
                    <p>引导介入时机:{{item.V8}}</p>
                    <p>引导结束时机:{{item.V9}}</p>
                    <p>高清修复:{{item.switchValue1}}</p>
                    <p>图片路径：{{item.src}}</p>
                    <p>图片比例：{{item.proportion}}</p>
                    <p>图片长宽：{{item.width_heigth}}</p>

                </div>
                <div class="show_img"        [ngClass]="{'show_img1': MyString.length == 0}"    >
                    <nz-empty class="empty"></nz-empty>
                </div>
            </div>
        </div>
    </div>    
</div>i

<app-style-model></app-style-model>
<app-model-lpp></app-model-lpp>